<template>
	<!-- 分页组件 -->
	<div class="Paging">
		<!-- 分页组件左边部分 -->
		<div class="left">
			<!-- 选择1页显示的条数 -->
			<el-select v-model="nowPageNumberType" filterable placeholder="Select">
				<el-option v-for="item in pageInfo.pageNumberType" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<!-- 用户输入跳转至某一页 -->
			<div class="passPage">
				跳至
				<input type="number" max="100" min="1" @blur="pageNumberJudgment" v-model="pageInfo.pageNumber">
				页
			</div>
		</div>
		<!-- 分页组件右边部分 -->
		<div class="rit">
			<!-- 页数索引减一 -->
			<div @click="pageChan(false)">
				<img src="../../../public/imgs/left.png" >
			</div>
			<!-- 当前页面数索引 -->
			<div>
				{{pageInfo.pageNumber}}
			</div>
			<!-- 页数索引加一 -->
			<div @click="pageChan(true)">
				<img src="../../../public/imgs/rit.png" >
			</div>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive,onMounted,watchEffect,watch,defineEmits,defineProps} from 'vue'
	let props=defineProps({
		pageMax:{
			default:1
		}
	})

	/* 下拉选择1页显示几条组件数据 */
	let pageInfo=reactive({
		pageNumberType:[
			{
				value: 10,
				label: '10条/页',
			},
			{
				value: 20,
				label: '20条/页',
			},
			{
				value: 30,
				label: '30条/页',
			},
			{
				value: 40,
				label: '40条/页',
			},
			{
				value: 50,
				label: '50条/页',
			},
		],
		pageNumber:1
	})
	/* 翻页并判断页数是否符合规范 */
	function pageChan(type){
		if(type){
			if(pageInfo.pageNumber<props.pageMax){
				pageInfo.pageNumber++
			}
		}else{
			(pageInfo.pageNumber<2)?(''):(pageInfo.pageNumber--)
		}
	}
	/* 失去焦点时验证输入是否符合规则，不符合规则则将页面数变为1 */
	function pageNumberJudgment(){
		if((!pageInfo.pageNumber*3) || (pageInfo.pageNumber<1) || (pageInfo.pageNumber>props.pageMax)){
			pageInfo.pageNumber=1
		}
	}
	/* 当前选择第N索引个，并默认赋值一个选项 */
	let nowPageNumberType=ref(pageInfo.pageNumberType[0].value)
	let emit=defineEmits(['page'])
	watch(()=>pageInfo.pageNumber,()=>{
		emit('page',nowPageNumberType,pageInfo.pageNumber)
	})
	watch(nowPageNumberType,()=>{
		emit('page',nowPageNumberType,pageInfo.pageNumber)
	})
</script>

<style lang="less" scoped="scoped">
	@import 'index.less';
</style>
